<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Css画一些基本的图形</title>
    <style>
        .wrap{
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            align-content: space-between;
        }
        .wrap div{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        /* 圆形裁剪 */
        .circle{
            clip-path: circle(50% at 50% 50%);
        }
        /* 椭圆裁剪 */
        .ellipse{
            clip-path: ellipse(25% 40% at 50% 50%);
        }
        /* 矩形裁剪 */
        .rectangle{
            clip-path: inset(5% 20% 15% 10%);
        }
        /* 多边形裁剪 - 三角形 */
        .triangle{
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        }
        /* 多边形裁剪 - 菱形 */
        .rhombus{
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        }
        /* 多边形裁剪 - 梯形 */
        .trapezoidal{
            clip-path: polygon(25% 0%,75% 0%,100% 100%,0% 100%);
        }
        /* 多边形裁剪 - 平行四边形 */
        .parallelogram{
            clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
        }
        /* 多边形裁剪 - 五边形 */
        .pentagon{
            clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
        }
        /* 多边形裁剪 - 六边形 */
        .hexagon{
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        }
        /* 多边形裁剪 - 七边形 */
        .heptagon{
            clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
        }
        /* 多边形裁剪 - 八边形 */
        .octagon{
            clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);              
        }
        /* 多边形裁剪 - 斜角 */
        .obliqueAngle{
            clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
        }
        /* 多边形裁剪 - 槽口 */
        .notch{
            clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
        }
        /* 多边形裁剪 - 左箭头 */
        .leftArrow{
            clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
        }
        /* 多边形裁剪 - 星星 */
        .star{
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
        }
        /* 多边形裁剪 - 十字架 */
        .crosses{
            clip-path: polygon(10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%);
        }
        /* 多边形裁剪 - 叉号 */
        .fork{
            clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
        }
        /* 多边形裁剪 - 对话框 */
        .dialogBox{
            clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);                    
        }
        /* 变形效果 */       
        .deformation{
            clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
            transition: 0.5s;
        }
        .deformation:hover{
            clip-path:polygon(0 0,0 0,100% 0,100% 0,100% 100%,100% 100%,0 100%,0 100%);
        }

    </style>
</head>
<body>
      <!-- clip-path属性的应用  -->
      <!-- clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。-->
    <!-- 可以用table表格布局不过，懒直接flex算了 -->
    <div class="wrap">
        <div class="circle">圆形</div>
        <div class="ellipse">椭圆</div>
        <div class="rectangle">矩形</div>
        <div class="triangle">三角形</div>
        <div class="rhombus">菱形</div>
        <div class="trapezoidal">梯形</div>
        <div class="parallelogram">平行四边形</div>
        <div class="pentagon">五边形</div>
        <div class="hexagon">六边形</div>
        <div class="heptagon">七边形</div>
        <div class="octagon">八边形</div>
        <div class="obliqueAngle">斜角</div>
        <div class="notch">槽口</div>
        <div class="leftArrow">左箭头</div>
        <div class="star">星星</div>
        <div class="crosses">十字架</div>
        <div class="fork">叉号</div>
        <div class="dialogBox">对话框</div>

        <div class="deformation">变形效果</div>
    </div>
</body>
</html>